<template>
  <view>
    <view class="container">
      <view class='edit-container'>
        <view class="a-item">
          <view class="icon">
            <image class="img" src="/static/images/icon/receiver.png"></image>
          </view>
          <view class="input-wrap">
            <input cursor-spacing='100' class='a-input' placeholder='姓名' v-model="formData.name"></input>
          </view>
        </view>
        <view class="a-item">
          <view class="icon">
            <image class="img" src="/static/images/icon/mobile.png"></image>
          </view>
          <view class="input-wrap">
            <input cursor-spacing='100' class='a-input' type='number' placeholder='手机号码'
              v-model="formData.mobile"></input>
          </view>
        </view>
        <view class="a-item">
          <view class="icon">
            <image class="img" src="/static/images/icon/position.png"></image>
          </view>
          <view class="input-wrap" @click="chooseRegion">
            <input cursor-spacing='100' class="a-input" disabled="true" :value="full_region" placeholder="选择省份、城市、区县" />
            <view class="arrow"></view>
          </view>
        </view>
        <view class="a-item">
          <view class="icon">
            <image class="img" src="/static/images/icon/address.png"></image>
          </view>
          <view class="input-wrap">
            <input cursor-spacing='100' class="a-input" placeholder="详细地址, 如街道、小区或写字楼等" v-model="formData.address" />
          </view>
        </view>
      </view>
      <view class="default-wrap">
        <view class="text">设为默认地址</view>
        <u-switch v-model="formData.is_default" :activeValue="1" :inactiveValue="0" class="switch"></u-switch>
      </view>
      <view class='btn-wrap' @click="saveAddress">
        <view class="btn active">保存</view>
      </view>
      <view class='delete-wrap' v-if="addressId">
        <view class='btn' @click="delAddress">删除</view>
      </view>
      <view class="region-select" v-if="regionShow">
        <view class="hd">
          <view class="region-selected">
            <!-- <view class="item disabled selected">index 0 安徽省 type 1</view>
            <view class="item disabled  selected"> index 1 合肥市 type 2</view>
            <view class="item disabled selected"> index 2 瑶海区 type 3</view> -->
            <!-- regionType当前处于的选择地址  类型 -->
            <!-- selected激活， regionType等于当前的循环索引+1 -->
            <!-- disabled禁用，item.id如果是0就表示还没有选择 -->
            <view class="item" @click="selectRegionType(item,index)"
              :class="{ disabled:item.id === 0,selected: regionType === index+1  }"
              v-for="(item,index) in selectRegionList" :key="item.id">{{item.name}}</view>
          </view>
          <view class="done" :class="{ disabled:confirmDisabled }" @click="doneSelectRegion">确定</view>
        </view>
        <view class="bd">
          <scroll-view scroll-y class="region-list">
            <view class="item" @click="selectRegion(item)" :class="{selected:item.selected}" v-for="item in regionList"
              :key="item.id">
              {{item.name}}
            </view>

          </scroll-view>
        </view>
      </view>
    </view>
    <view class="bg-mask" v-if="regionShow" @click="cancelSelectRegion"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          name: '', // 姓名
          mobile: '', // 手机号
          address: '', // 详细地址信息
          province_id: '', // 省份ID
          city_id: '', // 城市ID
          district_id: '', // 区县ID
          is_default: 0, // 是否默认

        },
        regionShow: false, // 地区选择展示
        selectRegionList: [ // 用于渲染顶部位置信息
          {
            id: 0,
            name: '省份',
            parent_id: 1,
            type: 1
          },
          {
            id: 0,
            name: '城市',
            parent_id: 1,
            type: 2
          },
          {
            id: 0,
            name: '区县',
            parent_id: 1,
            type: 3
          }
        ],
        regionType: 1, // 1选择省份， 2选择城市， 3选择区县
        regionList: [], // 地址列表
        addressInfo: { // 记录省市县名称
          province_name: '',
          city_name: '',
          district_name: ''
        },
        addressId: '' // 修改地址ID
      };
    },
    onLoad(options) {
      // 如果携带了id，说明是修改界面
      if (options.id) {
        // 存储地址
        this.addressId = options.id
        // 修改标题
        uni.setNavigationBarTitle({
          title: '修改地址'
        })
        // 获取回显数据
        this.getAddressInfo()
      }
    },
    methods: {
      chooseRegion() {
        // 弹框打开
        this.regionShow = true
        // 判断是否选择过地址
        if (this.formData.province_id > 0 && this.formData.city_id > 0 && this.formData.district_id > 0) {
          // 设置区域选择数据
          this.selectRegionList[0].id = this.formData.province_id
          this.selectRegionList[0].name = this.addressInfo.province_name
          this.selectRegionList[0].parent_id = 1
          this.selectRegionList[1].id = this.formData.city_id
          this.selectRegionList[1].name = this.addressInfo.city_name
          this.selectRegionList[1].parent_id = this.formData.province_id
          this.selectRegionList[2].id = this.formData.district_id
          this.selectRegionList[2].name = this.addressInfo.district_name
          this.selectRegionList[2].parent_id = this.formData.city_id
          // 三个都有，目前就是处于县
          this.regionType = 3
          // 现在处于县，那么就要获取该市下面的所有县
          this.getRegionList(this.formData.city_id)
        } else {
          // 情况1：从未选择过打开  情况2：之前选择过，点击去了取消(注意了selectRegionList可能有残留数据)
          this.selectRegionList = [{
                id: 0,
                name: '省份',
                parent_id: 1,
                type: 1
              },
              {
                id: 0,
                name: '城市',
                parent_id: 1,
                type: 2
              },
              {
                id: 0,
                name: '区县',
                parent_id: 1,
                type: 3
              }
            ],
            // 设置类型为1级
            this.regionType = 1
          // 获取1级省份数据
          this.getRegionList(1)
        }

      },
      // 遮罩层点击，取消选择地址
      cancelSelectRegion() {
        // 点击遮罩层，弹框关闭
        this.regionShow = false
        this.regionType = this.confirmDisabled ? 1 : 3
      },
      // 获取地址数据
      async getRegionList(regionId) {
        let res = await uni.$http.get('/region/list', {
          params: {
            parentId: regionId
          }
        })
        console.log(res);
        // 我们想给地址列表数据里面增加上一个selected字段来判断是否被勾选中
        // 如何判断？
        // 条件1：地址列表的数据和regionType要一致，
        // 比如regionType是1 列表一定就是省份的数据
        // regionType是2 列表一定就是城市的数据
        // regionType是3 列表一定就是区县的数据
        // 条件2：我的selecteRegionList对应位置数据(省市县)和列表(省市县)中id一致的元素就是要选中
        this.regionList = res.map(item => {
          // selecteRegionList数据[选择的省份数据信息0，选择的区县数据信息2]
          // regionType 1 2 3
          // this.selectRegionList[this.regionType - 1]对应的当前类型选择的数据信息
          if (this.regionType === item.type && this.selectRegionList[this.regionType - 1].id === item.id) {
            item.selected = true
          } else {
            item.selected = false
          }
          return item
        })
        console.log(this.regionList);
      },
      // 地址列表点击了
      selectRegion(val) {
        console.log(val); //val.type-1 对应存储的索引
        // this.selectRegionList[val.type-1] //对应元素的内容
        this.selectRegionList.splice(val.type - 1, 1, val)
        // 展示下一级数据
        if (this.regionType !== 3) {
          // 如果目前不是最下面一级(县)，需要切换类型 获取列表
          this.regionType++
          // 获取下一级地址列表
          this.getRegionList(val.id) //val.id就是作为下一级的parent_id
        }
        // 重置的逻辑
        this.selectRegionList.map((item, index) => {
          // 重新选择了省(0)  重置市县
          // 重新选择了市(1)  重置县
          // 重新选择了县(2)  不需要做什么
          if (index > val.type - 1) {
            item.id = 0
            item.name = index === 1 ? '城市' : '区县'
            item.parent_id = 0
          }
          return item
        })
        // 标记已选择
        this.regionList = this.regionList.map(item => {
          if (this.regionType === item.type && this.selectRegionList[this.regionType - 1].id === item.id) {
            item.selected = true
          } else {
            item.selected = false
          }
          return item
        })
      },
      // 顶部头部点击
      selectRegionType(val, idx) {
        // 如果对应的id为0，说明还没有选择，就不要切换点击,跳出
        if (this.selectRegionList[idx].id === 0) return
        // 如果当前是高亮，点击也没有意义
        if (val.type === this.regionType) return
        // val就是头部点击的信息，选择的省市县里面的某一个的详细选中信息
        console.log(val, idx); //idx+1 选择的地址类型
        this.regionType = idx + 1
        // 获取地址的列表
        this.getRegionList(val.parent_id)
      },
      // 确定按钮点击保存
      doneSelectRegion() {
        // 判断禁用
        if (this.confirmDisabled) return
        // 存储地址ID
        this.formData.province_id = this.selectRegionList[0].id
        this.formData.city_id = this.selectRegionList[1].id
        this.formData.district_id = this.selectRegionList[2].id
        // 存储名称
        this.addressInfo.province_name = this.selectRegionList[0].name
        this.addressInfo.city_name = this.selectRegionList[1].name
        this.addressInfo.district_name = this.selectRegionList[2].name
        // 弹框关闭
        this.regionShow = false
      },
      // 点击保存
      async saveAddress() {
        await uni.$http.post('/address/saveAddress', this.formData)
        uni.showToast({
          title: this.addressId ? '修改成功' : '添加成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 300)
      },
      // 修改获取回显数据
      async getAddressInfo() {
        let res = await uni.$http.get('/address/addressDetail', {
          params: {
            id: this.addressId
          }
        })
        this.formData = res
        this.addressInfo.province_name = res.province_name
        this.addressInfo.city_name = res.city_name
        this.addressInfo.district_name = res.district_name
      },
      // 删除事件函数
      async delAddress() {
        // 1.弹出确认框
        const [err, res] = await uni.showModal({
          title: '提示',
          content: "确定删除该地址吗？"
        })
        console.log(res);
        if (res.cancel) return
        // 2.发送删除请求
        await uni.$http.post('/address/deleteAddress', {
          id: this.addressId
        })
        // 3.提示成功
        uni.showToast({
          title: '删除成功',
          duration: 300
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 300)
      }
    },
    computed: {
      // 确定按钮是否禁用
      confirmDisabled() {
        // 思路：如果是selectRegionList只要有一个元素的id还是0，说明就没选择，就要禁用
        return this.selectRegionList.some(item => item.id === 0)
      },
      // 省市县在一起的描述
      full_region() {
        return Object.values(this.addressInfo).join('')
      }
    },
  }
</script>

<style lang="scss">
  page {
    min-height: 100%;
    background-color: #f8f8f8;
  }

  .container {
    min-height: 100%;
    /* align-items: stretch; */
    background: #f8f8f8;
    overflow-x: hidden;
    padding: 30rpx;
  }

  .edit-container {
    background: #fff;
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
  }

  .a-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30rpx;
  }

  .a-item .icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20rpx;
  }

  .a-item .icon .img {
    width: 36rpx;
    height: 36rpx;
  }

  .a-item .input-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 30rpx 30rpx 30rpx 0;
    border-bottom: 1rpx solid #f1f1f1;
  }

  .a-item:last-child .input-wrap {
    border-bottom: none;
  }

  .a-item .input-wrap .a-input {
    font-size: 28rpx;
    width: 100%;
  }

  .a-item .input-wrap .arrow {
    width: 10rpx;
    height: 10rpx;
    border-top: 4rpx solid #aaa;
    border-right: 4rpx solid #aaa;
    transform: rotate(45deg);
  }

  .a-input {
    font-size: 28rpx;
    width: 100%;
  }

  .confirm-box {
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    /* border-top:1px solid #eee;  */
    background: linear-gradient(to right, #ff116a, #fe5b46);
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    font-size: 32rpx;
  }

  .default-input {
    font-size: 28rpx;
    color: #233445;
    line-height: 60rpx;
    margin: 0 auto;
    width: 300rpx;
  }

  .region-select {
    width: 100%;
    height: 600rpx;
    background: #fff;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
  }

  .region-select .hd {
    height: 108rpx;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    padding: 46rpx 30rpx 0 30rpx;
    box-sizing: border-box;
  }

  .region-select .region-selected {
    float: left;
    height: 60rpx;
    display: flex;
  }

  .region-select .region-selected .item {
    max-width: 140rpx;
    margin-right: 30rpx;
    text-align: left;
    line-height: 60rpx;
    height: 100%;
    color: #333;
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .region-select .region-selected .item.disabled {
    color: #999;
  }

  .region-select .region-selected .item.selected {
    color: #ff3456;
  }

  .region-select .done {
    float: right;
    height: 60rpx;
    width: 60rpx;
    border: none;
    background: #fff;
    line-height: 60rpx;
    text-align: center;
    color: #ff3456;
    font-size: 28rpx;
  }

  .region-select .done.disabled {
    color: #999;
  }

  .region-select .bd {
    height: 492rpx;
    width: 100%;
    padding: 0 30rpx;
  }

  .region-select .region-list {
    height: 492rpx;
  }

  .region-select .region-list .item {
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    text-align: left;
    color: #333;
    font-size: 28rpx;
  }

  .region-select .region-list .item.selected {
    color: #ff3456;
  }

  .bg-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
  }

  .default-wrap {
    background: #fff;
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  .default-wrap .text {
    font-size: 28rpx;
  }

  .btn-wrap {
    width: 100%;
    padding: 24rpx 0;
    /* position: fixed;
    bottom: 0;
    left: 0; */
    box-sizing: border-box;
  }

  .btn-wrap .btn {
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border-radius: 10rpx;
    width: 100%;
    color: #fff;
    background: #bbb;
    box-shadow: 0rpx 10rpx 20rpx #ccc;
  }

  .btn-wrap .btn.active {
    background: linear-gradient(to right, #ff3456, #ff347d);
    box-shadow: 0rpx 10rpx 20rpx #f1f1f1;
    color: #fff;
  }

  .delete-wrap {
    width: 100%;
    padding: 24rpx;
    /* position: fixed;
    bottom: 0;
    left: 0; */
    box-sizing: border-box;
  }

  .delete-wrap .btn {
    font-size: 28rpx;
    color: #5d6777;
    text-align: center;
  }
</style>
